---
title: Switch
package: "@chakra-ui/switch"
image: "components/switch.svg"
---

The `Switch` component is used as an alternative for the
[Checkbox](/docs/form/checkbox) component. You can switch between enabled or
disabled states.

<ComponentLinks
  theme={{ componentName: "switch" }}
  github={{ package: "switch" }}
  npm={{ package: "@chakra-ui/switch" }}
/>

<carbon-ad></carbon-ad>

`Switch` must always be accompanied by a label, and follows the same keyboard
workflow as a `Checkbox`.

## Import

```js
import { Switch } from "@chakra-ui/react"
```

## Usage

```jsx
<FormControl display="flex" alignItems="center">
  <FormLabel htmlFor="email-alerts" mb="0">
    Enable email alerts?
  </FormLabel>
  <Switch id="email-alerts" />
</FormControl>
```

## Sizes

Pass the `size` prop to change the size of the `Switch`.

```jsx
<Stack align="center" direction="row">
  <Switch size="sm" />
  <Switch size="md" />
  <Switch size="lg" />
</Stack>
```

## Switch background color

You can change the checked background color of the `Switch` by passing the
`color` prop.

```jsx
<Stack direction="row">
  <Switch colorScheme="red" />
  <Switch colorScheme="teal" size="lg" />
</Stack>
```

## Props

<PropsTable of="Switch" />
